<template>
  <div class="app">
    <router-view v-slot="{Component}">
      <transition :name="animation">
        <keep-alive exclude="FoodDetail,SearchFood,Login,Setting">
          <component :is="Component"></component>
        </keep-alive>
      </transition>
    </router-view>

    <!-- 长按拉起：底部弹出框 -->
    <action-sheet v-if="$store.state.actionSheetConfig.isShow"></action-sheet>
  </div>
</template>

<script>
import {ref,watch} from 'vue';
import {useRoute,useRouter} from 'vue-router';
import ActionSheet from './components/ActionSheet.vue'
  export default {
    name:'App',
    components:{ActionSheet},
    setup(props,context) {
      const route = useRoute()
      const animation = ref('slide')
      let routeIndex = route.meta.index;
      watch(route,()=>{
        animation.value = route.meta.index<routeIndex?'slide-right':'slide-left';
        routeIndex = route.meta.index;
      });
      //阻止右键默认行为
      document.addEventListener('contextmenu',(event)=>{
        event.preventDefault();
      })

      return {animation};
      
    }
  }
</script>

<style lang="scss">

.app{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
//动画
//向左
.slide-left-enter-from{
  transform: translateX(100%);
}
.slide-left-enter-to,.slide-leave-from,.slide-left-leave-to{
  transform: translateX(0);
}

.slide-left-enter-active,.slide-left-leave-active{
  transition:all 200ms linear;
  position: fixed;
}

//向右
.slide-left-enter-from{
  transform: translateX(-100%);
}
.slide-left-enter-to,.slide-leave-from,.slide-left-leave-to{
  transform: translateX(0);
}

.slide-left-enter-active,.slide-left-leave-active{
  transition:all 200ms linear;
  position: fixed;
}
</style>